<template>
  <div class="wrapper">
    <el-container>
      <el-aside width="30vw">
        <el-col :span="12">
          <h5 class="mb-2"></h5>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @select="handelEcharts"
          >
            <el-menu-item index="0">
              <el-icon ><icon-menu /></el-icon>
              <span>套餐订单分析图</span>
            </el-menu-item>
            <el-menu-item index="1">
              <el-icon ><icon-menu /></el-icon>
              <span>医院订单对比图</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>
      <el-container>
          <el-header style="font-size: 30px; margin-top: 10px;">Echarts展示
            <el-button @click="toIndex" type="primary">返回首页</el-button>
          </el-header>
          <el-main style="width: 100%;height: 40vw;">
            <OrderCount v-if="echarts[0].isshow"></OrderCount>
            <OrderCountHospoital v-if="echarts[1].isshow"></OrderCountHospoital>
          </el-main>
          <el-footer></el-footer>
        </el-container>
    </el-container>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';
import OrderCount from '../components/OrderCount.vue';
import OrderCountHospoital from '../components/OrderCountHospoital.vue';
import { getSessionStorage } from '../common';
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import router from '../router';
import { useRoute,useRouter } from 'vue-router';

export default {
    components:{OrderCount,OrderCountHospoital},
    setup(){

      const router = useRouter()
      
      const state = reactive({
        echarts:[
          {name:"echarts1",isshow:true},
          {name:"echarts1",isshow:false}
        ]
      })

      function handelEcharts(index){
          state.echarts.forEach((item,i)=>{
              item.isshow = (i==parseInt(index))
          })
      }

      function toIndex(){
        router.push({name:"Index"})
      }

      return{
        ...toRefs(state),
        handelEcharts,
        toIndex
      }
    }
}
</script>

<style>
.wrapper{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.el-menu-vertical-demo{
  width: 24vw;
  height: 100% !important;
}

.el-menu-item {
  font-size: 20px !important;  /* 调整字体大小 */
  display: flex !important;
  justify-content: center !important; /* 水平居中 */
  align-items: center !important;     /* 垂直居中 */
}

/* 调整图标和文字的间距 */
.el-menu-item .el-icon {
  margin-right: 8px !important;
}

</style>